<template>
    <div>
        <van-nav-bar left-text="" left-arrow @click-left="router.go(-1)" />
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                </van-sidebar>
            </van-col>
            <van-col span="18">
                <van-search v-model="value" placeholder="请输入搜索关键词" />
                <div><img src="../../../img/p2.png" alt=""></div>
                <div v-for="(value, i) in list[active]?.children" :key="i">
                    <div>{{ value.cat_name }}</div>
                    <van-card v-for="(v, i) in value.children" :key="i" :price="v.cat_price" :title="v.cat_name"
                        @click="tosearch(v.cat_name)"
                        :thumb="v.cat_icon ? v.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />

                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { categoriesApi } from '@/api/api';
import { ref } from 'vue';
const active = ref(0);
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()

let list = ref([])

const getlist = () => {
    categoriesApi().then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()

const tosearch = (name) => {
    router.push({ path: '/search', query: { name: name } })
}
</script>

<style lang="scss" scoped></style>